<template>
    <div class="load-swiper-container swiper-container" :style="styles">
        <div class="swiper-wrapper">
            <div class="loadmore" v-if="showMore"><span>加载更多</span></div>
            <div class="swiper-slide" v-for="(item, index) in list" :key="index">
                <slot :item="item"></slot>
            </div>
        </div>
    </div>
</template>

<script>
  import Swiper from 'swiper'
  export default {
    props: {
      list: {
        type: Array,
        default: []
      },
      pageNo: {
        type: Number,
        default: 1
      },
      totalPage: {
        type: Number,
        default: 1
      },
      styles: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    data () {
      return {
        orderswiper: null,
        firstPull: false,
        scrollY: 0,
        showMore: false,
        slidesheight: 0
      }
    },
    created () {

    },
    watch: {
      list () {
        this.showMore = false
        this.orderswiper.allowTouchMove = true;
      }
    },
    mounted() {
      let _self = this;
      this.orderswiper = new Swiper('.load-swiper-container', {
        speed: 300,
        slidesPerView: 'auto',
        direction: 'vertical',
        setWrapperSize: true,
        autoHeight: true,
//        scrollbar: {
//          el: '.swiper-scrollbar',
//        },
        on: {
          touchEnd: function (e) {
            let swiper = this
            this.slidesheight = 0;
            for (let h = 0; h < swiper.slides.length; h++) {
              this.slidesheight += swiper.slides[h].offsetHeight;
            }
            let endTranslate = this.height - this.slidesheight // 这个是滑动到底部
            if (Math.abs(this.translate) - Math.abs(endTranslate) > 20 && this.translate < 0) {
              swiper.updateSlides()
              // 上拉加载
              if ((_self.pageNo) <= _self.totalPage) {
                swiper.touchEventsData.isTouched = false;
                _self.showMore = true
                swiper.allowTouchMove = false;
                _self.loadMore()
              }
            }
            if (this.translate > 100) {
              // 下拉刷新
              swiper.setTransition(this.params.speed);
              swiper.setTranslate(0);
              swiper.touchEventsData.isTouched = false;
            }
          },
          touchMove: function (e) {
            //_self.endY = e.touches[0].pageY
          },
          touchStart: function (e) {
            //_self.startY = e.touches[0].pageY
          }
        }
      });
    },
    methods: {
      loadMore () {
        this.$emit('loadMore')
      }
    },
    components: {}
  }
</script>
<style lang="less" scoped>
    .swiper-wrapper {
        background: #f8f8f8;
    }

    .loadmore {
        position: absolute;
        line-height: 20px;
        top: 100%;
        text-align: center;
        width: 100%;
    }

    /* 下拉、上拉提示信息 */
    .top-tip {
        position: absolute;
        top: -60px;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #555;
    }

    .bottom-tip {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;
        background: #f2f2f2;
    }

    /* 全局提示信息 */
    .alert {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: #fef5eb;;
    }

    .refresh-hook {
        font-size: 32px;
        color: #777;
        margin-bottom: 10px;
    }

    .alert-hook {
        font-size: 32px;
        color: #777;
        margin-bottom: 10px;
    }

    .outter {
        position: fixed;
        top: 88px;
        bottom: 0;
    }
</style>
